<template>
	<view class="waterfall-wrapper" ref="waterfallWrapper">
		<view class="left-waterfall__column" ref="left_colum">
			<slot name="left" :data="leftItems"></slot>
		</view>
		<view class="right-waterfall__column" ref="right_colum">
			<slot name="right" :data="rightItems"></slot>
		</view>
	</view>
</template>
<script>
	export default {
		name: "water-fall",
		props: {
			waterData: {
				type: Array,
				default: () => ([])
			},
			// 添加的数据的时长
			addTime: {
				type: Number,
				default: 0
			},
		},
		data() {
			return {
				leftItems: [], // 存放左边ul里面要展示的数据
				rightItems: [], // 存放右边ul里面要展示的数据
				tempList: [], // 临时
				leftHeight: 0,
				rightHeight: 0,
				query: null
			}
		},
		watch: {
			waterData(nVal, oVal) {
				// 判断当前开始的位置
				let startIndex = Array.isArray(oVal) && oVal.length > 0 ? oVal.length : 0
				// 防止tempList中的数据还未被操作完所以这里用拼接
				this.tempList = this.tempList.concat(JSON.parse(JSON.stringify(nVal.slice(startIndex))))
				this.updateWaterfall()
			}
		},
		mounted() {
			this.query = uni.createSelectorQuery().in(this);
			this.tempList = JSON.parse(JSON.stringify(this.waterData))
			this.updateWaterfall()
			
		},
		methods: {
			updateWaterfall() {
				
				this.query.select(".left-waterfall__column")
					.boundingClientRect()
					.exec(ret => {
						this.leftHeight = ret[0].height
					})
				this.query.select(".right-waterfall__column")
					.boundingClientRect()
					.exec(ret => {
						this.rightHeight = ret[0].height
					});

				let item = this.tempList.shift()

				if (item == null) {
					return
				}
				// if (!this.tempList.length) {
				// 	this.leftItems.push(item)
				// 	this.$nextTick(() => {
				// 		if (this.tempList.length) {
				// 			setTimeout(() => {
				// 				this.updateWaterfall()
				// 			}, this.addTime)
				// 		} else {
				// 			// 加载完毕
				// 			this.$emit("finish")
				// 		}
				// 	})
				// 	return
				// } 
				if (this.leftHeight < this.rightHeight) {
					this.leftItems.push(item)
				} else if (this.leftHeight > this.rightHeight) {
					this.rightItems.push(item)
				} else {
					// 为了保证前两项添加时，左右两边都还没有内容，这时候根据队列长度判断下一项该放在哪一边
					if (this.leftItems.length <= this.rightItems.length) {
						this.leftItems.push(item)
					} else {
						this.rightItems.push(item)
					}
				}

				this.$nextTick(() => {
					if (this.tempList.length) {
						setTimeout(() => {
							this.updateWaterfall()
						}, this.addTime)
					} else {
						// 加载完毕
						this.$emit("finish")
					}
				})
			},
			// 清除指定的某一条数据，根据id来实现
			remove(id) {
				// 如果查找不到就返回-1
				let index = -1
				console.log(id, "id:为", this.leftList)
				index = this.leftItems.findIndex(val => val.id == id)
				if (index != -1) {
					// 如果index不等于-1，说明已经找到了指定的数据
					this.leftItems.splice(index, 1)
				} else {
					// 同理于上面的方法
					index = this.rightItems.findIndex(val => val.id == id)
					if (index != -1) this.rightItems.splice(index, 1)
				}


				// 同时删除父组件对应的数据
				// index = this.value.findIndex(val => val[this.idKey] == id)
				// if (index != -1) this.$emit('input', this.value.splice(index, 1))
			},
			// 清空数据列表
			clear() {
				this.leftItems = []
				this.rightItems = []
				this.tempList = []
			}
		}
	}
</script>
<style lang="scss" scoped>
	.waterfall-wrapper {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: flex-start;
		width: 100%;


		.left-waterfall__column {
			flex: 1;
			height: auto;
			margin-left: 8px;
			margin-right: 4px;
		}

		.right-waterfall__column {
			flex: 1;
			height: auto;
			margin-right: 8px;
			margin-left: 4px;
		}
	}
</style>